<template>
	<view :style="$store.state.skin">
		<!-- 买入 卖出 撤单 持仓 -->
		<view class="Trading-box">
			<view class="tab-box">
				<view :class="[isActive === index ? 'active' : '']" class="col" v-for="(item, index) in tabData" :key="item.id" @click="isChange(index, item.title)">
					<text>{{ item.title }}</text>
				</view>
			</view>
			<!-- 买入 卖出-->
			<view class="Buy-box" v-if="isActive === 0 || isActive === 1">
				<view class="Buy-1" v-if="infoData.stock">
					<view class="col" :class="[isActive === 0 ? 'col' : 'blue-co1']" @click="allPages(1)">
						<view class="col-1 auto" v-if="pageData.szid || isActive === 1">{{ infoData.stock.code }}{{ infoData.stock.name }}</view>
						<view class="col-1 auto" v-else>点击选择待{{ isActive === 0 ? '买入' : '卖出' }}的股票</view>
						<!-- <view class="col-2 auto">K线</view> -->
					</view>
					<view class="col mt" :class="[isActive === 0 ? 'col' : 'blue-co1']">
						<view class="co1-3 auto fs" @click="priceChange(1)">-</view>
						<view class="col-1 auto">
							<input v-model="price" class="uni-input input" type="number" @input="onKeyInput($event, 'price')" />
						</view>
						<view class="col-2 auto fs" @click="priceChange(2)">+</view>
					</view>
					<view class="text-con">
						<view class="text">
							<text>跌停</text>
							<text style="color: #58bd6f">{{ infoData.stock.limit_down_price }}</text>
						</view>
						<view class="text">
							<text>涨停</text>
							<text style="color: #ff4c3e">{{ infoData.stock.limit_up_price }}</text>
						</view>
					</view>
					<view class="col" :class="[isActive === 0 ? 'col' : 'blue-co1']">
						<view class="co1-3 auto fs" @click="stockNumChange(1)">-</view>
						<view class="col-1 auto">
							<input class="uni-input input" v-model="stockNum" type="number" @input="stockNuminput" />
						</view>
						<view class="col-2 auto fs" @click="stockNumChange(2)">+</view>
					</view>
					<view class="text-con">
						<view class="text">
							<text>可{{ isActive === 0 ? '买' : '卖' }}</text>
							<text class="tsss">{{ isBuyNum || 0 }}</text>
							<text>股</text>
						</view>
					</view>
					<view v-if="isActive === 0" class="shipping-box" :class="[isActive === 0 ? 'shipping-box' : 'shipping-box-bule']">
						<view
							:class="[shippingSpaceActive === index ? 'activeShipping' : '']"
							class="shipping"
							v-for="(item, index) in shippingSpace"
							:key="item.id"
							@click="shippingSpaceChange(index)"
						>
							<view class="shipping-1">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="botton">
						<view
							class="bu1"
							@click="buyFns('0')"
							:style="this.price != Number(this.infoData.stock.price) ? 'background-color:#ccc' : ''"
							:disabled="this.price != Number(this.infoData.stock.price)"
							:class="[isActive === 0 ? 'bu1' : 'botton-blue']"
						>
							{{ isActive === 0 ? '买入' : '卖出' }}
						</view>
						<view class="bu2" @click="buyFns('1')">委托</view>
					</view>
					<view class="tips">委{{ isActive === 0 ? '买' : '卖' }}单30分钟无成交自动撤单</view>
				</view>
				<view class="Buy-2">
					<view class="col">
						<view class="for">
							<view class="for-1" v-for="(item, index) in infoData.list.sell">
								<view>卖{{ index + 1 }}</view>
								<view class="col-1">{{ item[0] }}</view>
								<view>{{ item[1] }}</view>
							</view>
						</view>
					</view>
					<view class="col">
						<view class="for">
							<view class="for-1" v-for="(item, index) in infoData.list.buy">
								<view>买{{ index + 1 }}</view>
								<view class="col-1">{{ item[0] }}</view>
								<view>{{ item[1] }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 买入卖出底部列表 -->
			<view class="button-tab" v-if="isActive === 0 || isActive === 1">
				<view class="button-tab-box">
					<view :class="[buttonTabActive === index ? 'active' : '']" class="col" v-for="(item, index) in buttonTab" :key="item.id" @click="buttonTabChange(index)">
						<text>{{ item.title }}</text>
					</view>
				</view>
				<view class="button-conent-box">
					<!-- 底部持仓列表 -->
					<!-- 持仓 -->
					<view class="list" v-show="item.all_no === infoData.stock.code" v-for="(item, index) in bottinHoldList" v-if="buttonTabActive === 0">
						<view class="col-1">
							<view class="text1">{{ item.name }} {{ item.all_no }}</view>
							<view class="text2">
								{{ item.create_at }}
							</view>
						</view>
						<view class="col-2">
							<view class="col-2-box">
								<view class="text1">成交价 &nbsp; {{ item.deal_price }}</view>
								<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
								<view class="text1">数量 &nbsp; {{ item.total_lever_num }}</view>
							</view>
							<view class="col-2-box">
								<view class="text1">市值 &nbsp; {{ item.market_value }}</view>
								<view class="text1 red">收益率 &nbsp; {{ item.income_rate }}</view>
								<view class="text1 red">亏盈 &nbsp; {{ item.single_profit_loss }}</view>
							</view>
							<view class="col-2-box">
								<view class="text1">保证金 &nbsp; {{ item.total_earnest }}</view>
								<view class="text1">总数 &nbsp; {{ item.total_lever_num }}</view>
								<view class="text1">可用 &nbsp; {{ item.can_use_num }}</view>
							</view>
						</view>
						<!-- 		<view class="col-3">
							<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" @click="ReplenishmentClick(item)">补充股数</view>
							<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" style="margin-left: 40rpx" @click="sellFn(item)">委托卖出</view>
							<view class="botton" :class="[item.account_freeze === false ? 'botton2' : 'gredBotton2']" @click="sellFn(item)">卖出</view>
						</view> -->
					</view>
					<!-- 委托中 -->
					<view class="button-conent-box-list-box" v-if="buttonTabActive === 1 || buttonTabActive === 2">
						<view class="list" v-show="item.all_no === infoData.stock.code" v-for="(item, index) in allHistory" :key="item.id">
							<view class="col-1">
								<view class="text1">{{ item.name }} {{ item.all_no }}</view>
								<view class="text2">{{ item.create_time }}</view>
							</view>
							<view class="col-2">
								<!-- 历史委托 -->
								<view class="col-2-box" v-if="buttonTabActive === 1">
									<view class="text1 red">委托价 &nbsp; {{ item.deal_price }}</view>
									<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
									<view class="text1 red">委托数量 &nbsp; {{ item.num }}</view>
								</view>
								<view class="col-2-box" v-if="buttonTabActive === 1">
									<view class="text1 red">保证金 &nbsp; {{ item.total_earnest }}</view>
									<view class="text1">交易类型 &nbsp; {{ item.mode_text }}</view>
									<view class="text1">自动管理 &nbsp; {{ item.is_auto_text }}</view>
								</view>
								<view class="col-2-box" v-if="buttonTabActive === 1">
									<view class="text1">成交时间 &nbsp; {{ item.update_time }}</view>
								</view>
								<!-- 历史成交 -->
								<view class="col-2-box" v-if="buttonTabActive === 2">
									<view class="text1 red">委托价 &nbsp; {{ item.deal_price }}</view>
									<view class="text1">委托数量 &nbsp; {{ item.num }}</view>
									<view class="text1">自动管理 &nbsp; {{ item.is_auto_text }}</view>
								</view>
								<view class="col-2-box" v-if="buttonTabActive === 2">
									<view class="text1 red">保证金 &nbsp; {{ item.total_earnest }}</view>
									<view class="text1" style="flex: 2">成交时间 &nbsp; {{ item.update_time }}</view>
									<view class=""></view>
								</view>
							</view>
						</view>
						<view class="image" v-if="allHistory.length <= 0">
							<image src="@/static/trade-icon/jy_icon09.png" mode=""></image>
						</view>
					</view>
					<view class="image" v-else>
						<image src="@/static/trade-icon/jy_icon09.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 撤单 持仓 -->
			<view class="list-box" v-if="isActive === 3">
				<view class="list" v-for="(item, index) in holdList">
					<view class="col-1">
						<view class="text1">{{ item.name }} {{ item.all_no }}</view>
						<view class="text2">
							{{ item.create_at }}
						</view>
					</view>
					<view class="col-2">
						<view class="col-2-box">
							<view class="text1">成交价 &nbsp; {{ item.deal_price }}</view>
							<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
							<view class="text1">数量 &nbsp; {{ item.total_lever_num }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">市值 &nbsp; {{ item.market_value }}</view>
							<view class="text1 red">收益率 &nbsp; {{ item.income_rate }}</view>
							<view class="text1 red">亏盈 &nbsp; {{ item.single_profit_loss }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">保证金 &nbsp; {{ item.total_earnest }}</view>
							<view class="text1">总数 &nbsp; {{ item.total_lever_num }}</view>
							<view class="text1">可用 &nbsp; {{ item.can_use_num }}</view>
						</view>
					</view>
					<view class="col-3">
						<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" @click="ReplenishmentClick(item)">补充股数</view>
						<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" style="margin-left: 40rpx" @click="sellFn(item)">委托卖出</view>
						<view class="botton" :class="[item.account_freeze === false ? 'botton2' : 'gredBotton2']" @click="sellFn(item)">卖出</view>
					</view>
				</view>
			</view>
			<view class="list-box" v-if="isActive === 2">
				<view class="list" v-for="(item, index) in RevokeList">
					<view class="col-1">
						<view class="text1">{{ item.name }} {{ item.all_no }}</view>
						<view class="text2">
							{{ item.create_time }}
						</view>
					</view>
					<view class="col-2">
						<view class="col-2-box">
							<view class="text1 red">委托价 &nbsp; {{ item.deal_price }}</view>
							<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
							<view class="text1">委托数量 &nbsp; {{ item.num }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">保证金 &nbsp; {{ item.total_earnest }}</view>
							<view class="text1 red">委托类型 &nbsp; {{ item.mode_text }}</view>
							<view class="text1 red">自动管理 &nbsp; {{ item.is_auto_text }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">到期时间 &nbsp; {{ item.expire_time }}</view>
						</view>
					</view>
					<view class="col-3">
						<view class="botton botton2" @click="cdnFn(item)">撤单</view>
					</view>
				</view>
				<view class="image" v-if="RevokeList.length <= 0">
					<image src="@/static/trade-icon/jy_icon09.png" mode=""></image>
				</view>
			</view>
			<entrust :isShow="isShow" :iswito="buyType" :isbuy="isbuy" :info="showData" @close="isShow = $event" @sub="buyFn(buyType)"></entrust>
			<typePopup ref="typePopup" :isShow="ReplenishmentShow" height="250rpx" type="Replenishment" @close="ReplenishmentShow = false" @sub="ReplenishmentSub"></typePopup>
		</view>
	</view>
</template>

<script>
import webSocketMixin from '@/api/socket.js';
import request from '@/api/request.js';
export default {
	mixins: [webSocketMixin],
	data() {
		return {
			cangList: [],
			showData: {},
			buyType: 0,
			isbuy: true,
			price: '', //股价
			stockNum: 0, //交易数量
			isBuyNum: 0, //可买数量
			tabData: [
				{
					id: 0,
					title: '买入'
				},
				{
					id: 1,
					title: '卖出'
				},
				{
					id: 2,
					title: '撤单'
				},
				{
					id: 3,
					title: '持仓'
				}
			],
			isActive: 0, // 默认选中
			pageData: {}, // 传递的数据
			shippingSpace: [
				{
					id: 0,
					title: '全仓'
				},
				{
					id: 1,
					title: '半仓'
				},
				{
					id: 2,
					title: '1/3仓'
				},
				{
					id: 3,
					title: '1/4仓'
				}
			],
			shippingSpaceActive: -1,

			socketTask: null, // wss:1
			holdList: [], // 持仓列表
			bottinHoldList: [], // 买入底部列表数组
			RevokeList: [], // 撤单列表
			buttonTab: [
				{
					id: 0,
					title: '持仓'
				},
				{
					id: 1,
					title: '委托'
				},
				{
					id: 2,
					title: '结算'
				}
			],
			buttonTabActive: 0,
			infoData: {
				list: {},
				stock: {}
			},

			isShow: false, // 是否显示弹框
			ReplenishmentShow: false, // 补充股数弹框
			ReplenishmentData: {}, // 补充股数数据
			allHistory: [] // 委托/成交
		};
	},
	onLoad(option) {
		if (option) {
			let data = JSON.parse(option.data);
			this.pageData = data;
			// 交易首页进入默认选中
			if (data.istradeid) {
				this.isActive = Number(data.istradeid);
				if (this.isActive === 1) {
					uni.showModal({
						title: '提示',
						content: '请选择卖出股票',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.isActive = 3;
							}
						}
					});
				} else if (this.isActive === 2) {
					this.GetrevokeList();
				}
			}
			// 存在szid才发请求
			if (this.pageData.szid) {
				this.getInfo(this.pageData.szid);
			}
			// 首页点击卖出
			if (data.isTrade === true) {
				this.sellFn(data);
			}
		}
	},
	async onShow() {
		// 设置导航栏颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$store.state.presentColor
		});
		let userData = uni.getStorageSync('userData');
		this.socketTask = await this.handleConnectWebSocket(`?type=trade_hold_shares&token=${userData.token}`);
		this.socketTask.onMessage((res) => {
			if (res.data) {
				let data = JSON.parse(res.data);
				if (data) {
					if (data.type === 'ping') {
						return;
					}
					// console.log('持仓', data);
					this.holdList = data;
					this.bottinHoldList = data;
				}
			}
		});
	},
	onUnload() {
		if (this.socketTask) {
			this.socketTask.close();
		}
	},
	methods: {
		cdnFn(item) {
			uni.showModal({
				title: '提示',
				content: '是否撤回改单交易？',
				success: (res) => {
					if (res.confirm) {
						request
							.get('/api/entrust/revoke', {
								id: item.id
							})
							.then((res) => {
								if (res.code == 1) {
									this.GetrevokeList();
									uni.showToast({
										title: '操作成功',
										icon: 'none'
									});
								}
							});
					}
				}
			});
		},
		sellFn(e) {
			// 账户冻结
			if (e.account_freeze === true) {
				return;
			}
			this.getInfo(e.all_no, () => {
				this.infoData.stock.price = e.price;
				this.infoData.stock.code = e.all_no;
				this.infoData.stock.id = e.id;
				this.price = e.price;
				this.isBuyNum = e.can_use_num;
				this.isActive = 1;
			});
		},
		buyFns(e) {
			if (!this.stockNum) {
				uni.showToast({
					title: '请输入股票数量',
					icon: 'none'
				});
				return;
			}
			if (Number(this.stockNum) % 100 != 0) {
				uni.showToast({
					title: '股票数量需为100的倍数',
					icon: 'none'
				});
				return;
			}
			if (Number(this.stockNum) > Number(this.isBuyNum)) {
				uni.showToast({
					title: `股票数量大于可${this.isActive === 0 ? '购买' : '卖出'}数量`,
					icon: 'none'
				});
				return;
			}
			if ((this.stockNum + '').indexOf('.') != -1 || (this.stockNum + '').indexOf('-') != -1) {
				uni.showToast({
					title: '股票数量请输入整数',
					icon: 'none'
				});
				return;
			}
			this.buyType = true;
			this.isShow = true;
			this.buyType = e;
			if (this.isActive) {
				this.isbuy = false;
			} else {
				this.isbuy = true;
			}
			this.showData = {
				name: this.infoData.stock.name,
				code: this.infoData.stock.code,
				num: this.stockNum,
				price: this.price
			};
		},
		//交易
		buyFn(e) {
			// 买入 和 委托买入
			if (this.isActive === 0) {
				if (e === '1') {
					//委托
					request
						.post('/api/entrust/create', {
							all_no: this.pageData.szid,
							deal_price: this.price,
							num: this.stockNum,
							isAuto: '1',
							type: '10',
							mode: 'buy'
						})
						.then((res) => {
							if (res.code == 1) {
								uni.showToast({
									title: '委托成功',
									icon: 'none'
								});

								this.getInfo(this.pageData.szid);
								this.isShow = false;
							}
						});
					return;
				} else {
					//买入
					request
						.post('/api/trade/createStrategy', {
							allNo: this.pageData.szid,
							price: this.price,
							num: this.stockNum,
							isAuto: '1'
						})
						.then((res) => {
							if (res.code == '1') {
								uni.showToast({
									title: '购买成功',
									icon: 'none'
								});

								this.getInfo(this.pageData.szid);
								this.isShow = false;
							}
						});
				}
			}
			// 卖出 和 委托卖出
			if (this.isActive === 1) {
				if (e === '1') {
					// 委托卖出
					request
						.post('/api/entrust/create', {
							all_no: this.infoData.stock.code,
							deal_price: this.price,
							num: this.stockNum,
							isAuto: '1',
							type: '10',
							mode: 'sell'
						})
						.then((res) => {
							if (res.code == 1) {
								uni.showToast({
									title: '委托成功',
									icon: 'none'
								});

								this.getInfo();
								this.isShow = false;
							}
						});
				} else {
					// 卖出
					request
						.post('/api/trade/pay', {
							id: this.infoData.stock.id,
							num: this.stockNum
						})
						.then((res) => {
							if (res.code == '1') {
								uni.showToast({
									title: '购买成功',
									icon: 'none'
								});

								this.getInfo();
								this.isShow = false;
							}
						});
				}
			}
		},
		//获取交易详情
		getInfo(e, fn) {
			request
				.get('/api/trade/getStockByTradeInfo', {
					all_no: e
				})
				.then((res) => {
					res.data.stock.code = e;
					this.infoData = res.data;
					this.price = Number(res.data.stock.price);
					this.isBuyNum = Number(res.data.full_warehouse);
					uni.setNavigationBarTitle({
						title: res.data.stock.name
					});
					if (fn) {
						fn();
					}
				});
		},
		// 买入 卖出 撤单 持仓 点击选择
		isChange(index, title) {
			this.isActive = index;
			if (index == 0) {
				if (this.pageData.szid) {
					this.getInfo(this.pageData.szid);
				}
			} else if (index == 1) {
				this.infoData = {
					list: {},
					stock: {}
				};
				this.stockNum = null;
				this.price = null;
				this.isBuyNum = null;
				uni.showModal({
					title: '提示',
					content: '请选择卖出股票',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							this.isActive = 3;
						}
					}
				});
			} else if (index == 2) {
				this.GetrevokeList();
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		// 全仓 半仓 点击选择
		shippingSpaceChange(index) {
			this.shippingSpaceActive = index;

			if (index == 0) {
				this.stockNum = parseInt(Number(this.infoData.user_balance) / Number(this.infoData.stock.price));
			} else if (index == 1) {
				this.stockNum = parseInt(Number(this.infoData.user_balance) / 2 / Number(this.infoData.stock.price));
			} else if (index == 2) {
				this.stockNum = parseInt(Number(this.infoData.user_balance) / 3 / Number(this.infoData.stock.price));
			} else if (index == 3) {
				this.stockNum = parseInt(Number(this.infoData.user_balance) / 4 / Number(this.infoData.stock.price));
			}

			setTimeout(() => {
				this.shippingSpaceActive = -1;
			}, 300);
		},
		// 底部点击选择
		buttonTabChange(index) {
			this.buttonTabActive = index;
			if (index === 1) {
				this.gethistoryWT();
			} else if (index === 2) {
				this.gethistoryCJ();
			}
		},
		// 获取历史委托
		async gethistoryWT() {
			let data = await request.get('/api/entrust/index?status=1');
			if (data.code === 1) {
				this.allHistory = [];
				this.allHistory = data.data;
			}
		},
		// 获取历史成交
		async gethistoryCJ() {
			let data = await request.get('/api/entrust/index?status=2');
			if (data.code === 1) {
				this.allHistory = [];
				this.allHistory = data.data;
			}
		},
		// 统一跳转
		allPages(index) {
			switch (index) {
				case 1:
					// 买入跳转搜索
					if (this.isActive === 0) {
						uni.navigateTo({
							url: `/pages/sousou/sousou?isActive=0`
						});
					} else if (this.isActive === 1) {
						uni.navigateTo({
							url: `/pages/sousou/sousou?isActive=1`
						});
					}

					break;
			}
		},
		// 控制input输入框只能输入两位小数
		onKeyInput(event, type) {
			let value = event.detail.value;
			if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
				let pArr = value.split('.');
				if (pArr.length > 1) {
					let newVal = pArr[0] + '.' + pArr[1].substr(0, 2);
					setTimeout(() => {
						this[type] = newVal;
					}, 10);
				}
			} else {
				console.log('两位小数');
			}
			// 重新计算可买股数
			setTimeout(() => {
				console.log(this[type]);
				let a = this.infoData.user_balance;
				let b = a / this[type];
				let c = b / 100 + '';
				let d = c.split('.');
				let e = Number(d[0]);
				let f = e * 100;
				console.log(f);
				this.isBuyNum = f;
			}, 15);
		},
		// 控制输入框只能输入整数
		stockNuminput(event) {
			let value = event.detail.value;
			let pArr = value.split('.');
			if (pArr.length > 1) {
				setTimeout(() => {
					this.stockNum = pArr[0];
				}, 11);
			} else {
				console.log('整数');
			}
		},
		// 价格点击加减处理
		priceChange(index) {
			this.price = Number(this.price);
			if (index === 1) {
				// 减
				let num = (this.price * 100) / 100 - 0.01;
				let snum = String(num);
				if (snum.length > 5) {
					this.price = Number(num).toFixed(2);
				} else {
					this.price = Number(num);
				}
				if (this.price < this.infoData.stock.limit_down_price) {
					this.price = this.infoData.stock.limit_down_price;
					return;
				}
			} else {
				let jnum = (this.price * 100) / 100 + 0.01;
				let sjnum = String(jnum);
				if (sjnum.length > 5) {
					this.price = Number(jnum).toFixed(2);
				} else {
					this.price = Number(jnum);
				}
				if (this.price > this.infoData.stock.limit_up_price) {
					this.price = this.infoData.stock.limit_up_price;
				}
			}
		},
		// 买入股数处理
		stockNumChange(index) {
			if (this.stockNum === '') {
				this.stockNum = 0;
			}
			this.stockNum = Number(this.stockNum);
			if (index === 1) {
				// 减
				this.stockNum -= 100;
				if (this.stockNum <= 0) {
					this.stockNum = 0;
				}
			} else {
				this.stockNum += 100;
				if (this.stockNum >= this.isBuyNum) {
					this.stockNum = this.isBuyNum;
				}
			}
		},
		// 获取撤单列表
		async GetrevokeList() {
			let data = await request.get('/api/entrust/index?status=1');
			if (data.code === 1) {
				this.RevokeList = data.data;
			}
		},
		// 撤单点击
		ReplenishmentClick(e) {
			// 账户冻结
			if (e.account_freeze === true) {
				return;
			}
			this.ReplenishmentShow = true;
			this.ReplenishmentData = e;
		},
		// 补充股数确定
		async ReplenishmentSub(value) {
			if (Number(value) % 100 != 0) {
				uni.showToast({
					title: '补仓数量需为100的倍数',
					icon: 'none'
				});
				return;
			}
			let data = await request.post('/api/trade/supplement', {
				id: this.ReplenishmentData.id,
				price: this.ReplenishmentData.price,
				num: value
			});
			if (data.code === 1) {
				this.$refs.typePopup.value = '';
				this.ReplenishmentShow = false;
				uni.showToast({
					title: data.msg,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.auto {
	display: flex;
	justify-content: center;
	align-items: center;
}
.Trading-box {
	.tab-box {
		width: 100%;
		display: flex;
		height: 90rpx;
		background-color: white;
		.col {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.active {
			border-bottom: 2px solid var(--nav-bg);
			color: var(--nav-bg);
		}
	}
	.Buy-box {
		display: flex;
		padding: 20rpx;
		background-color: white;
		.Buy-1 {
			flex: 2;
			.col {
				height: 82rpx;
				display: flex;
				border: 1px solid var(--nav-bg);
				.col-1 {
					flex: 1;
					.input {
						text-align: center;
					}
				}
				.col-2 {
					width: 100rpx;
					border-left: 1px solid var(--nav-bg);
				}
				.co1-3 {
					width: 100rpx;
					border-right: 1px solid var(--nav-bg);
				}
				.fs {
					color: var(--nav-bg);
				}
			}
			.blue-co1 {
				height: 82rpx;
				display: flex;
				border: 1px solid #4790ee !important;
				.col-2 {
					width: 100rpx;
					border-left: 1px solid #4790ee;
				}
				.co1-3 {
					width: 100rpx;
					border-right: 1px solid #4790ee;
				}
				.fs {
					color: #4790ee;
				}
			}
			.text-con {
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tsss {
					color: var(--nav-bg);
				}
			}
			.mt {
				margin-top: 20rpx;
			}
			.shipping-box {
				display: flex;
				justify-content: space-between;
				.shipping {
					padding: 4rpx 18rpx;
					border: 1px solid #bdbdbd;
					border-radius: 20rpx;
					font-size: 18rpx;
					color: black;
				}
				.activeShipping {
					border: 1px solid var(--nav-bg);
					color: var(--nav-bg);
				}
			}
			.shipping-box-bule {
				display: flex;
				justify-content: space-between;
				.shipping {
					padding: 4rpx 18rpx;
					border: 1px solid #bdbdbd;
					border-radius: 20rpx;
					font-size: 18rpx;
					color: black;
				}
				.activeShipping {
					border: 1px solid #4790ee;
					color: #4790ee;
				}
			}
			.botton {
				width: 100%;
				height: 82rpx;
				color: white;
				margin-top: 20rpx;
				display: flex;
				.bu1 {
					flex: 1;
					background-color: var(--nav-bg);
					text-align: center;
					line-height: 82rpx;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}
				.bu2 {
					flex: 1;
					background-color: #c78e55;
					text-align: center;
					line-height: 82rpx;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
				.botton-blue {
					flex: 1;
					background-color: var(--nav-bg);
					text-align: center;
					line-height: 82rpx;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}
			}
			.tips {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border: 1px dashed #ddd;
				margin-top: 20rpx;
				font-size: 16rpx;
			}
		}
		.Buy-2 {
			flex: 1.2;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.col {
				flex: 1;
				display: flex;
				border: 1px solid #ddd;
				padding: 10rpx;
				height: 339rpx;
				.for {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.for-1 {
						width: 100%;
						display: flex;
						justify-content: space-between;
					}
					.col-1 {
						color: #ff6161;
					}
				}
			}
		}
	}
	.list-box {
		padding: 20rpx 20rpx;
		background-color: white;
		.list {
			border-radius: 10rpx;
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx;
			box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			-webkit-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			-moz-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			font-size: 26rpx;
			.col-1 {
				display: flex;
				justify-content: space-between;
				.text2 {
					color: #999;
				}
			}
			.col-2 {
				padding-top: 10rpx;
				.col-2-box {
					text-align: left;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					color: #999;
					.text1 {
						flex: 1;
					}
					.red {
						color: var(--nav-bg) !important;
					}
				}
			}
			.col-3 {
				display: flex;
				justify-content: right;
				margin-top: 30rpx;
				.botton {
					width: 180rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 0rpx;
				}
				.botton1 {
					border: 1px solid var(--nav-bg);
					color: var(--nav-bg);
				}
				.botton2 {
					background-color: var(--nav-bg);
					color: white;
					margin-left: 40rpx;
				}
				.gredBotton1 {
					border: 1px solid #999;
					color: black;
				}
				.gredBotton2 {
					background-color: #999;
					color: white;
					margin-left: 40rpx;
				}
			}
		}
		.image {
			display: flex;
			justify-content: center;
			image {
				transform: scale(0.5);
			}
		}
	}
	.button-tab {
		margin-top: 20rpx;
		.button-tab-box {
			width: 100%;
			display: flex;
			height: 70rpx;
			background-color: white;
			.col {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.active {
				background-color: var(--trand-color);
				color: #ffffff;
			}
		}
		.button-conent-box {
			padding: 0rpx 20rpx;
			.list {
				border-radius: 10rpx;
				background-color: white;
				padding: 20rpx;
				margin-top: 20rpx;
				box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
				-webkit-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
				-moz-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
				.col-1 {
					display: flex;
					justify-content: space-between;
					.text2 {
						font-size: 20rpx;
						color: #999;
					}
				}
				.col-2 {
					padding-top: 10rpx;
					.col-2-box {
						text-align: left;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;
						color: #999;
						.text1 {
							flex: 1;
						}
						.red {
							color: var(--nav-bg) !important;
						}
					}
				}
				.col-3 {
					display: flex;
					justify-content: right;
					margin-top: 30rpx;
					.botton {
						width: 180rpx;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx 0rpx;
					}
					.botton1 {
						border: 1px solid #ff6161;
						color: #ff6161;
					}
					.botton2 {
						background-color: #ff6161;
						color: white;
						margin-left: 40rpx;
					}
					.gredBotton1 {
						border: 1px solid #999;
						color: black;
					}
					.gredBotton2 {
						background-color: #999;
						color: white;
						margin-left: 40rpx;
					}
				}
			}
			.button-conent-box-list-box {
				.list {
					border-radius: 10rpx;
					background-color: white;
					margin-top: 20rpx;
					padding: 20rpx;
					box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
					-webkit-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
					-moz-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
					.col-1 {
						display: flex;
						justify-content: space-between;
						.text2 {
							font-size: 20rpx;
							color: #999;
						}
					}
					.col-2 {
						padding-top: 10rpx;
						.col-2-box {
							text-align: left;
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							font-size: 20rpx;
							color: #999;
							.text1 {
								flex: 1;
								text-align: left;
							}
							.red {
								color: #e60012 !important;
							}
						}
					}
				}
				.image {
					display: flex;
					justify-content: center;
					image {
						transform: scale(0.5);
					}
				}
			}
			.image {
				display: flex;
				justify-content: center;
				image {
					transform: scale(0.5);
				}
			}
		}
	}
}
</style>
